<template>
  <div id="home">
    <section class="home-header">
      <van-search
        v-model="search"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        background="#F5F5F5"
      />
    </section>
    <section class="home-banner">
      <div class="home-swiper">
        <van-swipe :autoplay="3000" indicator-color="white" lazy-render>
          <van-swipe-item v-for="banner in banners" :key="banner.bannerId">
            <van-image fit="contain" :src="banner.pic" class="home-banner-image" radius="4"/>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="home-nav-list">
        <div class="home-title">
          <div class="title">推荐歌单</div>
          <div class="more">更多
            <van-icon name="arrow"/>
          </div>
        </div>
        <div class="home-song">
          <div class="home-song-list">
            <div class="home-song-item" v-for="songItem in songList" :key="songItem.id">
              <van-image width="122" height="122" fit="contain" :src="songItem.picUrl" radius="4"/>
              <div class="home-song-item-title">{{ songItem.name }}</div>
            </div>
          </div>
        </div>
        <div class="home-title">
          <div class="title">推荐新歌曲</div>
          <div class="more">更多
            <van-icon name="arrow"/>
          </div>
        </div>
        <div class="home-new-song">
          <div class="home-new-song-scroll">
            <div class="home-new-song-list" v-for="num in Math.ceil(newSongList.length / 3)" :key="num">
              <div class="home-new-song-item" v-for="item in newSongList.slice((num - 1) * 3, num * 3)" :key="item">
                <van-image width="50" height="50" fit="contain" :src="item.picUrl" radius="4" class="song-image"/>
                <div>
                  <div class="song-name">{{ item.name }}</div>
                  <div class="song-author">{{ item.song.artists.map(artist => artist.name).join(',') }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="home-album"></section>
    <section class="home-music"></section>
  </div>
</template>

<script setup lang="ts">
import { banner, queryNewSong, querySongList } from '@/api/home'
import { Ref, ref } from 'vue'
import { IBanner, IBannerRes, ISongList, ISongListRes, INewSongRes, INewSongList } from '@/type/home'

// 搜索
const search: Ref<String> = ref('')
const onSearch = (value: string) => {

}

// 获取banner组件
const banners: Ref<IBanner[]> = ref([])
const getBanner = async () => {
  const res: IBannerRes = await banner({
    type: '1'
  })

  if (res.code === 200) {
    banners.value = res.banners
  }
}
getBanner()

// 推荐歌单
const songList: Ref<ISongList[]> = ref([])
const getSongList = async (limit: number = 10) => {
  const res: ISongListRes = await querySongList({
    limit
  })
  if (res.code === 200) {
    songList.value = res.result
  }
}
getSongList()

// 获取推荐新歌
const newSongList: Ref<INewSongList[]> = ref([])
const getNewSongList = async (limit: number = 12) => {
  const res: INewSongRes = await queryNewSong({
    limit
  })
  if (res.code === 200) {
    newSongList.value = res.result
  }
}
getNewSongList()
</script>

<style scoped lang="scss">
#home {

  ::v-deep .van-search__content {
    background-color: #fff;
  }

  .home-banner {
    padding: 2px 12px 0;
    background: linear-gradient(#f5f5f5 10%, #fff 100%);

    .home-swiper {
    }
  }

  .home-nav-list {

    .home-title {
      margin: 12px 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-weight: bold;
        font-size: 16px;
      }

      .more {
        font-size: 12px;
        border-radius: 20px;
        border: 1px solid #ccc;
        padding: 4px 10px;
      }
    }
  }

  .home-song {
    overflow: hidden;

    .home-song-list {
      display: flex;
      overflow: auto;
      padding-bottom: 10px;

      .home-song-item {
        & + .home-song-item {
          margin-left: 10px;
        }

        .home-song-item-title {
          font-size: 12px;
          font-weight: 500;
          margin-top: 3px;
          line-height: 18px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //多行在这里修改数字即可
          -webkit-box-orient: vertical;
        }
      }
    }

  }

  .home-new-song {
    overflow: hidden;

    .home-new-song-scroll {
      display: flex;
      overflow: auto;
      padding-bottom: 10px;
    }

    .home-new-song-list {
      width: 70%;
      margin-right: 20px;

      .home-new-song-item {
        display: flex;

        .song-image {
          margin-right: 10px;
        }

        .song-name, .song-author {
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .song-author {
          margin-top: 10px;
          font-size: 12px;
        }

        & + .home-new-song-item {
          margin-top: 10px;
        }
      }
    }
  }

}

</style>
